<template>
	<view class="help">
		<navbar :title="$t('wode.about')" background="#ffffff"></navbar>
		<view class="daily-tabs">
			<view class="tab-box align-center-vertical" @click="onTabClick(0)" :class="{'tab-box-active': tabIndex == 0}">
				<view class="text align-center-vertical">
					{{$t('new.company')}}
				</view>
			</view>
			<view class="tab-box align-center-vertical" @click="onTabClick(1)" :class="{'tab-box-active': tabIndex == 1}">
				<view class="text align-center-vertical">
					{{$t('help.introduction')}}
				</view>
			</view>
		</view>
		<view v-if="tabIndex == 1">
			<template >
				<view class="fun-group">
					<view class="smile">
						<view class="logo">
							<image src="@/static/image/intros/logo.png" alt="" style="width: 170rpx;height: 170rpx;margin-top: 130rpx;
							margin-left: 545rpx;" />
						</view>
					</view>
					<view class="smile-info">
						<view>{{$t('intro.pro')}}</view>
						<view>{{$t('intro.create')}}</view>
						<view>{{$t('intro.marketing')}}</view>
					</view>
					<view class="network">
						{{$t('intro.http')}}
					</view>
					<view class="line">
						<view class="line-info">
							{{$t('intro.about')}}
						</view>
					</view>
						
					<p >
						<image src="@/static/image/intros/3.png" align="right" width="120" hspace="5" vspace="5" style="width: 508rpx;height: 340rpx;" />
						{{$t('intro.fun')}}
					</p>
				</view>
				<view class="business-box">
					<view class="line">
						<view class="line-info">
							{{$t('intro.fbusiness')}}
						</view>
					</view>
					<view class="business-info">
						{{$t('intro.as')}}
					</view>
					<view class="business-introduce">
						<view class="introduce1">
							<image src="@/static/image/intros/4.png" mode="" style="width: 139rpx;height: 140rpx;
							position: absolute;top:40rpx;left: -10rpx;"></image>
							<view class="buying">
								{{$t('intro.buying')}}
							</view>
							<view class="shop">
								<view class="cirle">
									
								</view>
								<text style="flex: 1;">{{$t('intro.shop')}}</text>
							</view>
						</view>
						<view class="introduce2">
							<image src="@/static/image/intros/4.png" mode="" style="width: 139rpx;height: 140rpx;
							position: absolute;top:40rpx;right: 0rpx;"></image>
							<view class="source">
								<view class="cirle">
									
								</view>
								<text style="flex: 1;">{{$t('intro.source')}}</text>
							</view>
							<view class="cashback">
								{{$t('intro.cashback')}}
							</view>
						</view>
						<view class="introduce3">
							<image src="@/static/image/intros/4.png" mode="" style="width: 139rpx;height: 140rpx;
							position: absolute;top:40rpx;"></image>
							<view class="makes">
								{{$t('intro.makes')}}
							</view>
							<view class="our">
								<view class="cirle">
									
								</view>
								<text style="flex: 1;">{{$t('intro.our')}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="introduce-box">
					<view class="line">
						<view class="line-info">
							{{$t('intro.why')}}
						</view>
					</view>
					<view class="introduce-info">
						{{$t('intro.will')}}
					</view>
					<view class="color-box">
						<view class="color-tittle">
							{{$t('intro.caring')}}
						</view>
						<view class="color-info">
							{{$t('intro.online')}}
						</view>
					</view>
					<view class="color-box1">
						<view class="color-tittle">
							{{$t('intro.support')}}
						</view>
						<view class="color-info">
							{{$t('intro.by')}}
						</view>
					</view>
					<view class="color-box">
						<view class="color-tittle">
							{{$t('intro.security')}}
						</view>
						<view class="color-info">
							{{$t('intro.wallet')}}
						</view>
					</view>
					<view class="color-box1">
						<view class="color-tittle">
							{{$t('intro.easy')}}
						</view>
						<view class="color-info">
							{{$t('intro.real')}}
						</view>
					</view>
					<view class="color-box">
						<view class="color-tittle">
							{{$t('intro.share')}}
						</view>
						<view class="color-info">
							{{$t('intro.powerful')}}
						</view>
					</view>
				</view>
				<view class="warm">
					<view class="warm-line">
						<view class="line-info">
							{{$t('intro.warm')}}
						</view>
					</view>
					<view class="warm-tittle">
						{{$t('intro.does')}}
					</view>
				</view>
				<view class="details-box">
					<p >{{$t('intro.first')}}</p>
					<p style="padding-top: 40rpx;">{{$t('intro.withdraw')}}</p>
					<p style="padding-top: 40rpx;">{{$t('intro.personal')}}</p>
					<p style="padding-top: 40rpx;">{{$t('intro.money')}}</p>
				</view>
				<view class="culture-box">
					<view class="culture-line">
						<view class="culture-info">
							{{$t('intro.culture')}}
						</view>
					</view>
				</view>
				<view class="msg-box">
					<view class="mission">
						<text>{{$t('intro.mission')}}</text>
						<view class="mission-info">
							{{$t('intro.and')}}
						</view>
					</view>
					<view class="vision">
						<text>{{$t('intro.vision')}}</text>
						<view class="mission-info">
							{{$t('intro.an')}}
						</view>
					</view>
					<view class="mission mission2" >
						<text>{{$t('intro.value')}}</text>
						<view class="mission-info fight">
							<view class="mission-flex">
								<view class="mission-cirle">
									
								</view>
								<text>{{$t('intro.fight')}}</text>
							</view>
						</view>
						<view class="mission-info share " >
							<view class="mission-flex">
								<view class="mission-cirle">
									
								</view>
								<text>{{$t('intro.together')}}</text>
							</view>
						</view>
						<view class="mission-info make">
							<view class="mission-flex">
								<view class="mission-cirle">
									
								</view>
								<text>{{$t('intro.make')}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-box">
					<image src="@/static/image/intros/logo2.png" alt="" style="width: 206rpx;height: 206rpx;margin: 413rpx 271rpx 0rpx;" />
					<view class="maxbox">
						<text>{{$t('intro.max')}}</text>
					</view>
				</view>
			</template>
		</view>
		<view class="profile-box" v-else>
			<image src="@/static/image/intro/1.png" style="width: 710rpx;height: 465rpx;" mode="" />
			<view class="content-box">
				<view class="content-point"></view>
				<view class="content-text">
					{{$t('intro.profile1')}}
				</view>
			</view>
			<view class="content-box">
				<view class="content-point"></view>
				<view class="content-text">
					{{$t('intro.profile2')}}
					<image src="@/static/image/intro/2.png" style="width: 304rpx;height: 375rpx;float:left;margin:20rpx 16rpx 0 0 ;" mode="" />
					<image src="@/static/image/intro/3.png" style="width: 330rpx;height: 330rpx;float:left;margin:20rpx  0rpx 0 0 ;" mode="" />
				</view>
			</view>
			<image src="@/static/image/intro/4.png" style="width: 710rpx;height: 465rpx;" mode="" />
			<view class="content-box">
				<view class="content-point"></view>
				<view class="content-text">
					{{$t('intro.profile3')}}
				</view>
			</view>
			<image src="@/static/image/intro/5.png" style="width: 710rpx;height: 465rpx;" mode="" />
			<view class="content-box">
				<view class="content-point"></view>
				<view class="content-text">
					<image src="@/static/image/intro/6.png" style="width: 320rpx;height: 498rpx;float:right;margin:0 0 20rpx 16rpx;" mode="" />
					{{$t('intro.profile4')}}
				</view>
			</view>
			<view class="service-box" v-if="systemInfo.about_online_service">
				<text class="online-title align-center-vertical">
					{{$t('intro.onlineservice')}}
				</text>
				<view class="service-text" v-for="item in systemInfo.about_online_service">{{item}}</view>
			</view>
			<view class="service-box" v-if="systemInfo.about_email">
				<text class="online-title align-center-vertical">
					{{$t('intro.email')}}
				</text>
				<view class="service-text">{{systemInfo.about_email}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				tabIndex:0,
			}
		},
		onLoad() {
		},
		mounted() {

		},
		computed: {
			...mapGetters(['systemInfo']),
		},
		methods: {
			show(name) {
				this.question[name].val = !this.question[name].val
			},
			clickCollapse(id) {
				uni.navigateTo({
					url: `./help_detail?id=${id}`
				})
			},
			onTabClick(val) {
				this.tabIndex = val;
			},
		},

	}
</script>

<style lang="scss" scoped>
	
	.profile-box {
		margin-top: 36rpx;
		padding: 0 20rpx;
		.content-point {
			width: 20rpx;
			height: 54rpx;
			border-radius: 10rpx;
			background: $u-type-primary;
		}
		.content-text {
			flex: 1;
			margin-left: 16rpx;
			color: #3A3A3A;
		}
		.content-box {
			margin: 35rpx 0 70rpx 0;
			display: flex;
		}
		.service-box {
			border-top: 2rpx solid #ECECEC;
			padding: 40rpx 0;

		}
		.online-title {
			width: 260rpx;
			height: 68rpx;
			padding: 0 20rpx;
			background: #005AFF;
			border-radius: 34rpx;
			color: #fff;
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}
		.service-text {
			margin: 20rpx 0;
			margin-left: 30rpx;
			color: #6A6A6A;
		}
	}
	.daily-tabs {
		position: fixed;
		top: calc( var(--status-bar-height) + 88rpx);
		z-index: 9999;
		background: rgba(172, 217, 255, .5);
		width: 100vw;
		margin:auto;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.tab-box {
			transition: all .5s ease-in-out;
			border-radius: 4rpx;
			
			height: 100rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
			padding: 7rpx;
			width: calc(100vw - 480rpx);
			background: #0F0F0E;
			&-active {
				background: $u-type-primary;
				color: #fff;
				line-height: 80rpx;
				font-size: 34rpx;
				width: 480rpx;
				.text {
					height: 100%;
					width:100%;
				}
			}
		}
	}
	.align-center-vertical{
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
	}
	.help {
		padding-top: 100rpx;
		padding-bottom: 30rpx;
		min-height: 100vh;
		.help_top {
			width: 748rpx;
			height: 392rpx;
			background: url('../../static/image/faq/bg_FAQ.png');
			background-size: 100%;
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.help_main {
			background: #fff;
			margin-top: -46rpx;
			border-radius: 60rpx 60rpx 0rpx 0rpx;
			height: 400rpx;
			width: 100%;
			padding-top: 40rpx;

			.help_main_title {
				width: 100%;
				padding: 30rpx 30rpx 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #E9ECEF;

				.help_main_title_name {
					font-weight: bold;
					font-size: 32rpx;
					height: 20rpx;
				}

				.help_main_title_url {
					font-size: 24rpx;
					color: #DCDCDC;
				}
			}

			.help_main_item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				// padding-right: 20rpx;
				border-bottom: 2rpx solid #E9ECEF;
				padding: 20rpx;

				.help_main_item_icon {
					width: 35%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 20rpx;
					
					.help_main_item_icon_url {
						width: 60rpx;
						height: 60rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					.help_main_item_icon_title {
						text-align: center;
						color: #A9A9A9;
					}
					
				}

				.help_main_item_content {
					width: 65%;
				}
			}

		}

		.mar_bottom {
			margin-bottom: 50rpx;
		}

	}
	.fun-group{
		background-color: #fff;
		p{
			padding-top: 68rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #4C4C4C;
		}
	}
	
	.smile{
		width: 750rpx;
		height: 1163rpx;
		background-image: url('@/static/image/intros/bg.png');
		background-size: 100%;
	}
	
	.smile-info{
		width: 741rpx;
		height: 289rpx;
		background-image: url('@/static/image/intros/1.png');
		background-size: 100%;
		margin-left: 9rpx;
		margin-top: -280rpx;
		padding: 104rpx 26rpx 57rpx 79rpx;
		font-size: 38rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: right;
	}
	
	.network{
		width: 750rpx;
		height: 58rpx;
		background: #F6F6F6;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #4C4C4C;
		line-height: 58rpx;
		text-align: right;
		margin-top: 69rpx;
		padding-right: 33rpx;
	}
	
	.line{
		width: 521rpx;
		height: 98rpx;
		background-image: url('@/static/image/intros/2.png');
		background-size: 100%;
		margin-top: 92rpx;
		margin-left: 80rpx;
		position: relative;
		.line-info{
			position: absolute;
			top: 14rpx;
			left: -60rpx;
			width: 520rpx;
			height: 98rpx;
			background: #FF8E20;
			border-radius: 58rpx 28rpx 58rpx 28rpx;
			margin-top: 14rpx;
			text-align: center;
			font-size: 44rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}
	}
	
	
	
	.business-box{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		.business-info{
			padding: 67rpx 30rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #4C4C4C;
		}
		.business-introduce{
			width: 750rpx;
			height: 1186rpx;
			background: #FF8E20;
			overflow: hidden;
			.introduce1{
				width: 720rpx;
				height: 356rpx;
				background: #FFFFFF;
				border-radius: 227rpx 0rpx 0rpx 129rpx;
				margin-top: 50rpx;
				margin-left: 30rpx;
				position: relative;
				display: flex;
				padding: 38rpx 23rpx 26rpx 41rpx;
				.buying{
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 500;
					color: #1E1E1E;
					padding-top: 204rpx;
				}
				.shop{
					margin-left: 39rpx;
					font-size: 20rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #4C4C4C;
					display: flex;
					.cirle{
						width: 12rpx;
						height: 12rpx;
						background: #FF6634;
						border-radius: 50%;
						margin-right: 7rpx;
					}
				}
			}
			.introduce2{
				margin-top: 8rpx;
				width: 720rpx;
				height: 356rpx;
				background: #FFFFFF;
				border-radius: 0rpx 227rpx 129rpx 0rpx;
				position: relative;
				padding: 91rpx 40rpx 102rpx 30rpx;
				display: flex;
				.source{
					display: flex;
					font-size: 20rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #4C4C4C;
					margin-right: 21rpx;
					.cirle{
						width: 12rpx;
						height: 12rpx;
						background: #FF6634;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}
				.cashback{
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 500;
					color: #1E1E1E;
					padding-top: 113rpx;
				}
			}
			.introduce3{
				width: 720rpx;
				height: 356rpx;
				background: #FFFFFF;
				border-radius: 227rpx 0rpx 0rpx 129rpx;
				margin-top: 10rpx;
				margin-left: 30rpx;
				padding: 37rpx 24rpx 36rpx 42rpx;
				display: flex;
				position: relative;
				.makes{
					text-align: center;
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 500;
					color: #1E1E1E;
					padding-top: 155rpx;
					margin-right: 6rpx;
				}
				.our{
					display: flex;
					font-size: 20rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #4C4C4C;
					.cirle{
						width: 12rpx;
						height: 12rpx;
						background: #FF6634;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}
			}
			
		}
		
	}
	.introduce-box{
		overflow: hidden;
		background-color: #FFFFFF;
		padding-bottom: 315rpx;
		.introduce-info{
			padding: 69rpx 31rpx 231rpx;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 500;
			color: #1E1E1E;
			background: url("@/static/image/intros/5.png") no-repeat ;
			background-size: 217rpx 262rpx;
			background-origin: padding-box;
			background-position: right 0;
		}
		.color-box{
			margin-top: 16rpx;
			overflow: hidden;
			width: 720rpx;
			height: 310rpx;
			background-image: url("@/static/image/intros/6.png");
			background-size: 100%;
			padding-right: 30rpx;
		}
		.color-box1{
			margin-top: 16rpx;
			overflow: hidden;
			width: 720rpx;
			height: 310rpx;
			background-image: url("@/static/image/intros/7.png");
			background-size: 100%;
			padding-right: 30rpx;
		}
	}
	.color-tittle{
		font-size: 34rpx;
		font-family: Rubik;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 25rpx;
		margin-left: 60rpx;
	}
	.color-info{
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #4C4C4C;
		margin-top: 50rpx;
		margin-left: 60rpx;
	}
	.warm{
		width: 750rpx;
		height: 454rpx;
		background: #FFF0E2;
		background: url('@/static/image/intros/8.png')  no-repeat;
		background-position: 0 32rpx;
		background-size: 750rpx 390rpx;
		background-color: #FFF0E2;
		overflow: hidden;
		.warm-tittle{
			font-size: 36rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			padding: 38rpx 87rpx 0 52rpx;
		}
	}
	.warm-line{
		width: 520rpx;
		height: 98rpx;
		background-image: url('@/static/image/intros/2.png');
		background-size: 100%;
		margin-top: 122rpx;
		margin-left: 201rpx;
		position: relative;
		text-align: center;
		.line-info{
			position: absolute;
			top: 14rpx;
			left: -181rpx;
			width: 660rpx;
			height: 98rpx;
			background: #FFFFFF;
			border-radius: 58px 28px 58px 28px;
			font-size: 44rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FF8E20;
			line-height: 98rpx;
		}
	}
	
	.details-box{
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #4C4C4C;
		background-color: #FFFFFF;
		padding: 24rpx 44rpx 160rpx 34rpx;
	}
	
	.culture-box{
		overflow: hidden;
		width: 750rpx;
		height: 316rpx;
		background-image: url('@/static/image/intros/9.png');
		background-size: 100%;
		background-color: #FFFFFF;
		.culture-line{
			width: 520rpx;
			height: 98rpx;
			background-image: url('@/static/image/intros/2.png');
			background-size: 100%;
			margin-top: 90rpx;
			margin-left: 201rpx;
			position: relative;
			text-align: center;
			.culture-info{
				position: absolute;
				top: 14rpx;
				left: -181rpx;
				width: 660rpx;
				height: 98rpx;
				background: #FFFFFF;
				border-radius: 58px 28px 58px 28px;
				font-size: 44rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #FF8E20;
				line-height: 98rpx;
			}
		}
	}
	
	.msg-box{
		padding-top: 100rpx;
		padding-bottom: 110rpx;
		.mission2{
			margin-top: -66rpx;
			width: 650rpx;
			height: 306rpx;
			background-image: url('@/static/image/intros/10.png');
			background-size: 100%;
			font-size: 44rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			padding-top: 12rpx;
			padding-left: 35rpx;
			padding-right: 109rpx;
		}
		.mission{
			width: 650rpx;
			height: 306rpx;
			background-image: url('@/static/image/intros/10.png');
			background-size: 100%;
			font-size: 44rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			padding-top: 12rpx;
			padding-left: 35rpx;
			padding-right: 109rpx;
			.mission-info{
				font-size: 26rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #4C4C4C;
				margin-top: 44rpx;
				.mission-flex{
					display: flex;
					align-items: center;
					.mission-cirle{
						width: 14rpx;
						height: 14rpx;
						background: #333335;
						border-radius: 50%;
						margin-right: 12rpx;
					}
					
				}
			}
			.fight{
				margin-top: 27rpx;
				
			}
			
			.share{
				margin-top: 27rpx;
				margin-left: 19rpx;
			}
			.make{
				margin-top: 27rpx;
				margin-left: 39rpx;
			}
		}
		.vision{
			width: 650rpx;
			height: 306rpx;
			background-image: url('@/static/image/intros/10.png');
			background-size: 100%;
			font-size: 44rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			padding-top: 12rpx;
			padding-left: 35rpx;
			padding-right: 109rpx;
			margin-top: -60rpx;
			margin-left: 60rpx;
			.mission-info{
				font-size: 26rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #4C4C4C;
				margin-top: 44rpx;
			}
		}
		
	}
	.bottom-box{
		width: 750rpx;
		height: 1332rpx;
		background-image: url('@/static/image/intros/11.png');
		background-size: 100%;
	}
	
	.maxbox{
		width: 576rpx;
		height: 72rpx;
		font-size: 34rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		-webkit-text-stroke: 2rpx #FF8D1F;
		text-stroke: 4rpx #FF8D1F;
		margin-top: 40rpx;
		margin-left: 88rpx;
		text-align: center;
	}
</style>
